
<script lang="ts" setup>
import {onMounted, reactive, ref} from "vue";
import DataSourceInfoVO from "@/domain/vo/DataSourceInfoVO";
import dataSourceService from "@/service/DataSourceService";
import InfoDialog from "@/views/code-gen/data-source/InfoDialog.vue";
import PageBO from "@/domain/bo/PageBO";

onMounted(() => {
  //加载数据
  getTableData();
})

//========================== 列表逻辑 ==========================
const tableList = reactive(new Array<DataSourceInfoVO>);
const page = reactive(new PageBO());

function getTableData() {
  infoDialogVisible.value = false;
  tableList.length = 0;
  dataSourceService.list(page)
      .then((res) => {
        page.convertFromList(res)
        res.list.forEach(item => tableList.push(DataSourceInfoVO.createFormObject(item)))
      });
}

function tableCurrentChange(value: number) {
  page.page = value;
  getTableData();
}

function tablePrevClock() {
  page.page -= 1;
  getTableData();
}

function tableNextClick() {
  page.page += 1;
  getTableData();
}

function delRow(rwo: DataSourceInfoVO) {
  dataSourceService.del([rwo.id]).then(
      (res) => {
        getTableData();
      }
  )
}

//========================== 事件 ==========================
const infoDialogVisible = ref(false);
const infoDialogInfoVO = ref(new DataSourceInfoVO());

function rowInfo(row: DataSourceInfoVO) {
  dataSourceService.get(row.id)
      .then((res) => {
        infoDialogInfoVO.value.coverFormObject(res)
        infoDialogVisible.value = true;
      });
}

function add() {
  infoDialogInfoVO.value = new DataSourceInfoVO();
  infoDialogVisible.value = true;
}
</script>
<template>
  <div>
    <el-form>
      <el-form-item>
        <el-button type="primary" @click="add()">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableList"
              stripe
              style="width: 100%">
      <el-table-column
          prop="databaseTypeName"
          label="数据库类型">
      </el-table-column>
      <el-table-column
          prop="host"
          label="连接地址">
      </el-table-column>
      <el-table-column
          prop="port"
          label="端口">
      </el-table-column>
      <el-table-column
          prop="schemaName"
          label="连接库">
      </el-table-column>
      <el-table-column
          prop="username"
          label="用户名">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作">
        <template #default="scope">
          <el-button @click="rowInfo(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="delRow(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        class="pagination"
        :page-size="page.pageSize"
        layout="total,  prev, pager, next, jumper"
        :total="page.total"
        :default-page-size="20"
        :background="true"
        @current-change="tableCurrentChange"
        @prev-click="tablePrevClock"
        @next-click="tableNextClick"
    />
    <info-dialog
        :dialog-visible="infoDialogVisible"
        :data-source-info-v-o="infoDialogInfoVO"
        @close-after="infoDialogVisible = false"
        @save-after="getTableData"/>
  </div>
</template>
<style lang="scss" scoped>
.pagination {
  margin-top: 40px;
  justify-content: center;
}
</style>